{% extends "../inc/base.html" %}
{% block content %}


<!-- REVOLUTION SLIDER -->
<div class="slider fullwidthbanner-container roundedcorners">
<!--
Navigation Styles:

data-navigationStyle="" theme default navigation

data-navigationStyle="preview1"
data-navigationStyle="preview2"
data-navigationStyle="preview3"
data-navigationStyle="preview4"

Bottom Shadows
data-shadow="1"
data-shadow="2"
data-shadow="3"

Slider Height (do not use on fullscreen mode)
data-height="300"
data-height="350"
data-height="400"
data-height="450"
data-height="500"
data-height="550"
data-height="600"
data-height="650"
data-height="700"
data-height="750"
data-height="800"
-->
<div class="fullwidthbanner" data-height="600" data-shadow="0" data-navigationStyle="preview2">
<ul class="hide">
{#
<!-- SLIDE  -->
<li data-transition="fade" data-slotamount="1" data-masterspeed="1500" data-delay="10000" data-saveperformance="off" data-title="Slide 1" style="background-color: #F6F6F6;">

<img src="/static/assets/images/backgrounds/grey-noise-min.jpg" alt="video" data-bgposition="top center" data-bgfit="cover" data-bgrepeat="no-repeat">

<div class="tp-caption customin ltl tp-resizeme revo-slider-caps-text uppercase"
data-x="left" data-hoffset="0"
data-y="70"
data-customin="x:-200;y:0;z:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:200;transformOrigin:50% 0%;"
data-speed="400"
data-start="1000"
data-easing="easeOutQuad"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn">
<img src="/static/assets/images/demo/desktop_slider_2.png" alt="">
</div>

<div class="tp-caption large_bold_grey skewfromrightshort customout font-open-sans"
data-x="645"
data-y="70"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="500"
data-start="800"
data-easing="Back.easeOut"
data-endspeed="500"
data-endeasing="Power4.easeIn"
data-captionhidden="off"
style="z-index: 4; font-weight:bold;">Smarty
</div>

<div class="tp-caption large_bold_grey skewfromleftshort customout font-open-sans"
data-x="645"
data-y="133"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="300"
data-start="1100"
data-easing="Back.easeOut"
data-endspeed="500"
data-endeasing="Power4.easeIn"
data-captionhidden="off"
style="z-index: 7; font-weight:bold !important;">Multipurpose
</div>

<div class="tp-caption ltl customin customout small_light_white font-lato"
data-x="650"
data-y="235"
data-customin="x:0;y:150;z:0;rotationZ:0;scaleX:1.3;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:200;transformOrigin:50% 0%;"
data-speed="500"
data-start="1300"
data-easing="easeOutQuad"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="500"
data-endeasing="Power4.easeIn" style=" color: #333; font-size:20px; max-width: 550px; white-space: normal; text-shadow:none;">
Smarty Multipurpose Template, now offering you
over 550 html pages fully customizable + Admin + RTL!<br />
<strong>Lifetime free update!</strong>
</div>


<div class="tp-caption large_bold_darkblue skewfromleftshort customout"
data-x="650" data-hoffset="-90"
data-y="370"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="500"
data-start="1600"
data-easing="Back.easeOut"
data-endspeed="500"
data-endeasing="Power4.easeIn"
data-captionhidden="off"
style="z-index: 10; text-shadow:none;">550+
</div>

<div class="tp-caption medium_bg_darkblue skewfromleftshort customout"
data-x="650" data-hoffset="-90"
data-y="430"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="500"
data-start="1650"
data-easing="Back.easeOut"
data-endspeed="500"
data-endeasing="Power4.easeIn"
data-captionhidden="off"
style="z-index: 11; text-shadow:none;">Html Pages
</div>

<div class="tp-caption medium_bold_red skewfromleftshort customout start font300"
data-x="800" data-hoffset="-90"
data-y="390"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="500"
data-start="1850"
data-easing="Back.easeOut"
data-endspeed="500"
data-endeasing="Power4.easeIn"
data-captionhidden="off"
style="z-index: 13; text-shadow:none; font-weight:300;">+ RTL <strong>Support</strong>
</div>

<div class="tp-caption medium_bg_red skewfromleftshort customout"
data-x="800" data-hoffset="-90"
data-y="430"
data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
data-speed="500"
data-start="2300"
data-easing="Back.easeOut"
data-endspeed="500"
data-endeasing="Power4.easeIn"
data-captionhidden="off"
style="z-index: 21; text-shadow:none;">Admin Included
</div>

</li>
#}
	{#
<!-- SLIDE  -->
<li data-transition="fade" data-slotamount="1" data-masterspeed="1000" data-saveperformance="off" data-title="Slide 2">

<img src="/static/assets/images/1x1.png" data-lazyload="http://data.cmswing.com/index-min.jpg" alt="" data-bgfit="cover" data-bgposition="center bottom" data-bgrepeat="no-repeat" />

<div class="overlay dark-1"><!-- dark overlay [1 to 9 opacity] --></div>

<div class="tp-caption customin ltl tp-resizeme text_white"
data-x="center"
data-y="155"
data-customin="x:0;y:150;z:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:200;transformOrigin:50% 0%;"
data-speed="800"
data-start="1000"
data-easing="easeOutQuad"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn" style="z-index: 10;">
<span class="weight-300">DEVELOPMENT / MARKETING / DESIGN / PHOTO</span>
</div>

<div class="tp-caption customin ltl tp-resizeme large_bold_white"
data-x="center"
data-y="205"
data-customin="x:0;y:150;z:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:200;transformOrigin:50% 0%;"
data-speed="800"
data-start="1200"
data-easing="easeOutQuad"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn" style="z-index: 10;">
WELCOME TO SMARTY
</div>

<div class="tp-caption customin ltl tp-resizeme small_light_white font-lato"
data-x="center"
data-y="295"
data-customin="x:0;y:150;z:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:200;transformOrigin:50% 0%;"
data-speed="800"
data-start="1400"
data-easing="easeOutQuad"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn" style="z-index: 10; width: 100%; max-width: 750px; white-space: normal; text-align:center; font-size:20px;">
Fabulas definitiones ei pri per recteque hendrerit scriptorem in errem scribentur mel fastidii propriae philosophia cu mea.
</div>

<div class="tp-caption customin ltl tp-resizeme"
data-x="center"
data-y="383"
data-customin="x:0;y:150;z:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:200;transformOrigin:50% 0%;"
data-speed="800"
data-start="1550"
data-easing="easeOutQuad"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn" style="z-index: 10;">
<a href="#purchase" class="btn btn-default btn-lg">
<span>Purchase Smarty Now</span>
</a>
</div>

</li>
	#}
{#
<!-- SLIDE  -->
<li data-transition="fade" data-slotamount="7" data-masterspeed="300"  data-saveperformance="off" data-title="Slide 3">
<img src="/static/assets/images/1x1.png" data-lazyload="/static/assets/images/demo/wall2.jpg" alt="" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat" />

<div class="tp-caption lfr"
data-x="left" data-hoffset="60"
data-y="85"
data-speed="1500"
data-start="500"
data-easing="easeOutExpo"
data-elementdelay="0.1"
data-endelementdelay="0.1"
data-endspeed="300"
style="z-index: 2;">
<img src="/static/assets/images/1x1.png" data-lazyload="/static/assets/images/demo/ipad.png" alt="" />
</div>

<div class="tp-caption block_black sft"
data-x="right" data-hoffset="-70"
data-y="137"
data-speed="750"
data-start="1100"
data-easing="easeOutExpo"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.1"
data-endelementdelay="0.1"
data-endspeed="300"
style="z-index: 3; max-width: auto; max-height: auto; white-space: nowrap;">Smarty Template
</div>

<div class="tp-caption block_black sfb"
data-x="right" data-hoffset="-70"
data-y="176"
data-speed="750"
data-start="1400"
data-easing="easeOutExpo"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.1"
data-endelementdelay="0.1"
data-endspeed="300"
style="z-index: 4; max-width: auto; max-height: auto; white-space: nowrap;">100% Fully Responisve
</div>

<div class="tp-caption block_theme_color sft"
data-x="right"  data-hoffset="-70"
data-y="239"
data-speed="750"
data-start="1700"
data-easing="easeOutExpo"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.1"
data-endelementdelay="0.1"
data-endspeed="300"
style="z-index: 5; max-width: auto; max-height: auto; white-space: nowrap;">With Incredible
</div>

<div class="tp-caption block_theme_color sfb"
data-x="right"  data-hoffset="-70"
data-y="278"
data-speed="750"
data-start="2000"
data-easing="easeOutExpo"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.1"
data-endelementdelay="0.1"
data-endspeed="300"
style="z-index: 6; max-width: auto; max-height: auto; white-space: nowrap;">Additions &amp; Optimizations
</div>

<div class="tp-caption block_black sft"
data-x="right"  data-hoffset="-70"
data-y="340"
data-speed="750"
data-start="2300"
data-easing="easeOutExpo"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.1"
data-endelementdelay="0.1"
data-endspeed="300"
style="z-index: 7; max-width: auto; max-height: auto; white-space: nowrap;">For Your Next Projects
</div>
</li>
	#}
{#
<!-- SLIDE  -->
<li data-transition="random" data-slotamount="1" data-masterspeed="1000" data-saveperformance="off" data-title="Slide 5">

<img src="/static/assets/images/1x1.png" data-lazyload="/static/assets/images/demo/1200x800/24-min.jpg" alt="" data-bgposition="center center" data-kenburns="on" data-duration="10000" data-ease="Linear.easeNone" data-bgfit="100" data-bgfitend="110" />

<div class="tp-caption very_large_text lfb ltt tp-resizeme"
data-x="right" data-hoffset="-100"
data-y="center" data-voffset="-50"
data-speed="600"
data-start="800"
data-easing="Power4.easeOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="500"
data-endeasing="Power4.easeIn">
RUN WILD
</div>

<div class="tp-caption medium_light_white lfb ltt tp-resizeme"
data-x="right" data-hoffset="-110"
data-y="center" data-voffset="60"
data-speed="600"
data-start="900"
data-easing="Power4.easeOut"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="500"
data-endeasing="Power4.easeIn">
Happiness is an accident of nature,<br/>
a beautiful and flawless aberration.<br/>
<span style="font-size:24px;font-weight:400;">&ndash; Pat Conroy</span>
</div>

</li>
#}
<!-- SLIDE -->
<li data-transition="fade" data-slotamount="1" data-masterspeed="1000" data-saveperformance="off" data-title="Slide 6">

<img src="/static/assets/images/1x1.png" data-lazyload="/static/assets/images/demo/video/back.jpg" alt="video" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat">

<div class="tp-caption tp-fade fadeout fullscreenvideo"
data-x="0"
data-y="50"
data-speed="1000"
data-start="1100"
data-easing="Power4.easeOut"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1500"
data-endeasing="Power4.easeIn"
data-autoplay="true"
data-autoplayonlyfirsttime="false"
data-nextslideatend="true"
data-volume="mute"
data-forceCover="1"
data-aspectratio="16:9"
data-forcerewind="on" style="z-index: 2;">

<div class="tp-dottedoverlay twoxtwo"><!-- dotted overlay --></div>

<video class="" preload="none" style="widt:100%;height:100%" poster="http://data.cmswing.com/back.jpg">
<source src="http://data.cmswing.com/back.webm" type="video/webm" />
<source src="http://data.cmswing.com/back.mp4" type="video/mp4" />
</video>

</div>

<div class="tp-caption customin ltl tp-resizeme text_white"
data-x="center"
data-y="155"
data-customin="x:0;y:150;z:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:200;transformOrigin:50% 0%;"
data-speed="800"
data-start="1000"
data-easing="easeOutQuad"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn" style="z-index: 3;">
<span class="weight-300">极速 / 高效 / 专业 / 匠心</span>
</div>

<div class="tp-caption customin ltl tp-resizeme large_bold_white"
data-x="center"
data-y="205"
data-customin="x:0;y:150;z:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:200;transformOrigin:50% 0%;"
data-speed="800"
data-start="1200"
data-easing="easeOutQuad"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn" style="z-index: 3;">
WELCOME TO CMSWING
</div>

<div class="tp-caption customin ltl tp-resizeme small_light_white font-lato"
data-x="center"
data-y="295"
data-customin="x:0;y:150;z:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:200;transformOrigin:50% 0%;"
data-speed="800"
data-start="1400"
data-easing="easeOutQuad"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn" style="z-index: 3; width: 100%; max-width: 750px; white-space: normal; text-align:center; font-size:20px;">
	基于ThinkJS(Node.js MVC)和MySQL的功能强大的（PC端,手机端和微信公众平台）电子商务平台及CMF系统
</div>

<div class="tp-caption customin ltl tp-resizeme"
data-x="center"
data-y="363"
data-customin="x:0;y:150;z:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:200;transformOrigin:50% 0%;"
data-speed="800"
data-start="1550"
data-easing="easeOutQuad"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeIn" style="z-index: 3;">
<a href="#purchase" class="btn btn-default btn-lg">
<span>现在使用</span>
</a>
</div>

</li>
	<!-- SLIDE  -->
	<li data-transition="fade" data-slotamount="7" data-masterspeed="300" data-link="http://www.cmswing.com/" data-title="Slide 4" data-target="_blank" data-saveperformance="off">

		<img src="/static/assets/images/1x1.png" data-lazyload="http://data.cmswing.com/wall.jpg" alt="" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat" />

		<div class="tp-caption lfb"
			 data-x="right" data-hoffset="-70"
			 data-y="120"
			 data-speed="2000"
			 data-start="500"
			 data-easing="easeOutExpo"
			 data-elementdelay="0.1"
			 data-endelementdelay="0.1"
			 data-endspeed="300"
			 style="z-index: 2;">
			<img src="/static/assets/images/1x1.png" alt="" data-lazyload="/static/assets/images/demo/desktop_slider.png">
		</div>

		<div class="tp-caption mediumlarge_light_white lfb tp-resizeme"
			 data-x="left" data-hoffset="150"
			 data-y="183"
			 data-speed="1000"
			 data-start="1400"
			 data-easing="easeOutExpo"
			 data-splitin="none"
			 data-splitout="none"
			 data-elementdelay="0.1"
			 data-endelementdelay="0.1"
			 data-endspeed="300"
			 style="z-index: 3; max-width: auto; max-height: auto; white-space: nowrap;">+ 为创业加速,为创新奔跑
		</div>

		<div class="tp-caption mediumlarge_light_white lft tp-resizeme"
			 data-x="left" data-hoffset="70"
			 data-y="135"
			 data-speed="1000"
			 data-start="1200"
			 data-easing="easeOutExpo"
			 data-splitin="none"
			 data-splitout="none"
			 data-elementdelay="0.1"
			 data-endelementdelay="0.1"
			 data-endspeed="300"
			 style="z-index: 4; max-width: auto; max-height: auto; white-space: nowrap;">+ CmsWing  CMF
		</div>

		<div class="tp-caption block_white sfl tp-resizeme"
			 data-x="70"
			 data-y="266"
			 data-speed="750"
			 data-start="1900"
			 data-easing="easeOutExpo"
			 data-splitin="none"
			 data-splitout="none"
			 data-elementdelay="0.1"
			 data-endelementdelay="0.1"
			 data-endspeed="300"
			 style="z-index: 5; max-width: auto; max-height: auto; white-space: nowrap;">互联网+ 电子商务平台 CMS系统
		</div>

		<div class="tp-caption block_theme_color sfr tp-resizeme"
			 data-x="120"
			 data-y="310"
			 data-speed="750"
			 data-start="2200"
			 data-easing="easeOutExpo"
			 data-splitin="none"
			 data-splitout="none"
			 data-elementdelay="0.1"
			 data-endelementdelay="0.1"
			 data-endspeed="300"
			 style="z-index: 6; max-width: auto; max-height: auto; white-space: nowrap;">深度整合微信公众平台
		</div>

		<div class="tp-caption block_white sfb tp-resizeme"
			 data-x="170"
			 data-y="356"
			 data-speed="750"
			 data-start="2500"
			 data-easing="easeOutExpo"
			 data-splitin="none"
			 data-splitout="none"
			 data-elementdelay="0.1"
			 data-endelementdelay="0.1"
			 data-endspeed="300"
			 style="z-index: 7; max-width: auto; max-height: auto; white-space: nowrap;">全端兼容立体化解决方案
		</div>
	</li>

</ul>

<div class="tp-bannertimer"><!-- progress bar --></div>
</div>
</div>
<!-- /REVOLUTION SLIDER -->


<!-- INFO BAR -->
<section class="info-bar info-bar-clean">
<div class="container">

<div class="row">

<div class="col-sm-4">
<i class="glyphicon glyphicon-globe"></i>
<h3>FULLY RESPONSIVE</h3>
<p>Smarty Template is fully responsive</p>
</div>

<div class="col-sm-4">
<i class="glyphicon glyphicon-usd"></i>
<h3>ADMIN INCLUDED</h3>
<p>Smarty Template include admin</p>
</div>

<div class="col-sm-4">
<i class="glyphicon glyphicon-flag"></i>
<h3>ONLINE SUPPORT 24/7</h3>
<p>Free support via email</p>
</div>

</div>

</div>
</section>
<!-- /INFO BAR -->



<!-- WELCOME -->
<section class="nopadding-bottom">
<div class="container">
<header class="text-center margin-bottom-40">
<h1 class="weight-300">Welcome to Smarty</h1>
<h2 class="weight-300 letter-spacing-1 size-13"><span>THE MOST COMPLETE TEMPLATE EVER</span></h2>
</header>

<div class="text-center">
<p class="lead">
Smarty has powerful options &amp; tools, unlimited designs, responsive framework and amazing support.
We are dedicated to providing you with the best experience possible. Read below to find out why the sky's the limit when using Smarty.
</p>

<div class="margin-top-40">
<img class="img-responsive" src="/static/assets/images/demo/index/ipad.jpg" alt="welcome" />
</div>

</div>
</div>
</section>
<!-- /WELCOME -->




<!-- -->
<section class="alternate">
<div class="container">

<div class="row">

<div class="col-md-4">

<div class="box-icon box-icon-side box-icon-color box-icon-round">
<i class="fa fa-tablet"></i>
<a class="box-icon-title" href="#">
<h2>Fully Reposnive</h2>
</a>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
<a class="box-icon-more font-lato weight-300" href="#">Learn More</a>
</div>

</div>

<div class="col-md-4">

<div class="box-icon box-icon-side box-icon-color box-icon-round">
<i class="fa fa-tint"></i>
<a class="box-icon-title" href="#">
<h2>Reusable Elements</h2>
</a>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
<a class="box-icon-more font-lato weight-300" href="#">Learn More</a>
</div>

</div>

<div class="col-md-4">

<div class="box-icon box-icon-side box-icon-color box-icon-round">
<i class="fa fa-cogs"></i>
<a class="box-icon-title" href="#">
<h2>Multipurpose</h2>
</a>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
<a class="box-icon-more font-lato weight-300" href="#">Learn More</a>
</div>

</div>

</div>

</div>
</section>
<!-- / -->




<!-- -->
<section>
<div class="container">
<header class="text-center margin-bottom-40">
<h1 class="weight-300">Real Support. Real People.</h1>
<h2 class="weight-300 letter-spacing-1 size-13"><span>THE MOST COMPLETE TEMPLATE EVER</span></h2>
</header>

<div class="row">

<div class="col-sm-6">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero quod consequuntur quibusdam, enim expedita sed quia nesciunt incidunt accusamus necessitatibus modi adipisci officia libero accusantium esse hic, obcaecati, ullam, laboriosam!</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti vero, animi suscipit id facere officia. Aspernatur, quo, quos nisi dolorum aperiam fugiat deserunt velit rerum laudantium cum magnam.</p>

<a class="btn btn-default" href="#">LEARN MORE</a>
</div>

<div class="col-sm-6">
<img class="img-responsive" src="/static/assets/images/demo/index/support.jpg" alt="support" />
</div>

</div>
</div>
</section>
<!-- / -->




<!-- COLOR BOXES -->
<section class="nopadding noborder">
<!--
.box-pink
.box-blue
.box-orange
.box-yellow
.box-purple
.box-red
.box-brown
.box-green
.box-black
.box-gray
.box-teal



CREATE YOUR OWN COLORS - CSS EXAMPLE:
.box-pink>div:nth-child(1) {
background-color:#e2476b;
}
.box-pink>div:nth-child(2) {
background-color:#e9738f;
}
.box-pink>div:nth-child(3) {
background-color:#f09fb2;
}
.box-pink>div:nth-child(4) {
background-color:#f7cbd5;
}

-->
<div class="row box-gradient box-gray">
<div class="col-xs-6 col-sm-3">
<i class="fa fa-child fa-4x"></i>
<h2 class="countTo font-raleway" data-speed="3000">8165</h2>
<p>HAPPY CUSTOMERS</p>
</div>

<div class="col-xs-6 col-sm-3">
<i class="fa fa-smile-o fa-4x"></i>
<h2 class="countTo font-raleway" data-speed="3000">1033</h2>
<p>FACIALS</p>
</div>

<div class="col-xs-6 col-sm-3">
<i class="fa fa-heart fa-4x"></i>
<h2 class="countTo font-raleway" data-speed="3000">24567</h2>
<p>MASSAGES</p>
</div>

<div class="col-xs-6 col-sm-3">
<i class="fa fa-female fa-4x"></i>
<h2 class="countTo font-raleway" data-speed="3000">68</h2>
<p>MOTHERS TO BE</p>
</div>
</div>
</section>
<!-- /COLOR BOXES -->




<!-- Features -->
<section>
<div class="container">

<header class="text-center margin-bottom-40">
<h1 class="weight-300">Smarty Features</h1>
<h2 class="weight-300 letter-spacing-1 size-13"><span>WE TRULY CARE ABOUT OUR CUSTOMERS</span></h2>
</header>

<div class="row margin-top-80">

<div class="col-lg-4 col-md-4 col-md-push-4 text-center">

<img class="img-responsive" src="/static/assets/images/demo/iphone-min.png" alt="" />

</div>

<div class="col-lg-4 col-md-4 col-sm-6 col-md-pull-4">

<div class="box-icon box-icon-right">
<a class="box-icon-title" href="#">
<i class="fa fa-eye"></i>
<h2>Retina Ready</h2>
</a>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
</div>

<div class="box-icon box-icon-right">
<a class="box-icon-title" href="#">
<i class="fa fa-check"></i>
<h2>Unlimited Options</h2>
</a>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
</div>

<div class="box-icon box-icon-right">
<a class="box-icon-title" href="#">
<i class="fa fa-rocket"></i>
<h2>Premium Sliders</h2>
</a>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
</div>

<div class="box-icon box-icon-right">
<a class="box-icon-title" href="#">
<i class="fa fa-flash"></i>
<h2>performance</h2>
</a>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
</div>

</div>

<div class="col-lg-4 col-md-4 col-sm-6">

<div class="box-icon box-icon-left">
<a class="box-icon-title" href="#">
<i class="fa fa-tablet"></i>
<h2>Fully Reposnive</h2>
</a>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
</div>

<div class="box-icon box-icon-left">
<a class="box-icon-title" href="#">
<i class="fa fa-random"></i>
<h2>Clean Design</h2>
</a>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
</div>

<div class="box-icon box-icon-left">
<a class="box-icon-title" href="#">
<i class="fa fa-tint"></i>
<h2>Reusable Elements</h2>
</a>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
</div>

<div class="box-icon box-icon-left">
<a class="box-icon-title" href="#">
<i class="fa fa-cogs"></i>
<h2>Multipurpose</h2>
</a>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
</div>

</div>

</div>


</div>
</section>
<!-- /Features -->




<!-- CALLOUT -->
<section class="callout-dark heading-title heading-arrow-bottom">
<div class="container">

<header class="text-center">
<h1 class="weight-300 size-40">Our Latest Works</h1>
<h2 class="weight-300 letter-spacing-1 size-13"><span>WE TRULY CARE ABOUT OUR CUSTOMERS</span></h2>
</header>

</div>
</section>
<!-- /CALLOUT -->




<!-- WORK -->
<section class="nopadding">
<div id="portfolio" class="portfolio-nogutter">
<div class="row mix-grid">

<div class="col-md-3 col-sm-3 mix development"><!-- item -->

<div class="item-box">
<figure>
<span class="item-hover">
<span class="overlay dark-5"></span>
<span class="inner">

	<!-- lightbox -->
	<a class="ico-rounded lightbox" href="assets/images/demo/mockups/1200x800/1-min.jpg" data-plugin-options='{"type":"image"}'>
		<span class="fa fa-plus size-20"></span>
	</a>

	<!-- details -->
	<a class="ico-rounded" href="portfolio-single-slider.html">
		<span class="glyphicon glyphicon-option-horizontal size-20"></span>
	</a>

</span>
</span>

<img class="img-responsive" src="/static/assets/images/demo/mockups/600x399/1-min.jpg" width="600" height="399" alt="">
</figure>

<div class="item-box-desc">
<h3>Nature Photography</h3>
<ul class="list-inline categories nomargin">
<li><a href="#">Photography</a></li>
<li><a href="#">Design</a></li>
</ul>
</div>

</div>

</div><!-- /item -->


<div class="col-md-3 col-sm-3 mix development"><!-- item -->

<div class="item-box">
<figure>
<span class="item-hover">
<span class="overlay dark-5"></span>
<span class="inner">

	<!-- lightbox -->
	<a class="ico-rounded lightbox" href="assets/images/demo/mockups/1200x800/11-min.jpg" data-plugin-options='{"type":"image"}'>
		<span class="fa fa-plus size-20"></span>
	</a>

	<!-- details -->
	<a class="ico-rounded" href="portfolio-single-slider.html">
		<span class="glyphicon glyphicon-option-horizontal size-20"></span>
	</a>

</span>
</span>

<img class="img-responsive" src="/static/assets/images/demo/mockups/600x399/11-min.jpg" width="600" height="399" alt="">
</figure>

<div class="item-box-desc">
<h3>Nature Photography</h3>
<ul class="list-inline categories nomargin">
<li><a href="#">Photography</a></li>
<li><a href="#">Design</a></li>
</ul>
</div>

</div>

</div><!-- /item -->


<div class="col-md-3 col-sm-3 mix photography"><!-- item -->

<div class="item-box">
<figure>
<span class="item-hover">
<span class="overlay dark-5"></span>
<span class="inner">

	<!-- lightbox -->
	<a class="ico-rounded lightbox" href="assets/images/demo/mockups/1200x800/20-min.jpg" data-plugin-options='{"type":"image"}'>
		<span class="fa fa-plus size-20"></span>
	</a>

	<!-- details -->
	<a class="ico-rounded" href="portfolio-single-slider.html">
		<span class="glyphicon glyphicon-option-horizontal size-20"></span>
	</a>

</span>
</span>

<img class="img-responsive" src="/static/assets/images/demo/mockups/600x399/20-min.jpg" width="600" height="399" alt="">
</figure>

<div class="item-box-desc">
<h3>Fashion Design</h3>
<ul class="list-inline categories nomargin">
<li><a href="#">Photography</a></li>
<li><a href="#">Design</a></li>
</ul>
</div>

</div>

</div><!-- /item -->


<div class="col-md-3 col-sm-3 mix design"><!-- item -->

<div class="item-box">
<figure>
<span class="item-hover">
<span class="overlay dark-5"></span>
<span class="inner">

	<!-- lightbox -->
	<a class="ico-rounded lightbox" href="assets/images/demo/mockups/1200x800/19-min.jpg" data-plugin-options='{"type":"image"}'>
		<span class="fa fa-plus size-20"></span>
	</a>

	<!-- details -->
	<a class="ico-rounded" href="portfolio-single-slider.html">
		<span class="glyphicon glyphicon-option-horizontal size-20"></span>
	</a>

</span>
</span>

<img class="img-responsive" src="/static/assets/images/demo/mockups/600x399/19-min.jpg" width="600" height="399" alt="">
</figure>

<div class="item-box-desc">
<h3>Ocean Project</h3>
<ul class="list-inline categories nomargin">
<li><a href="#">Photography</a></li>
<li><a href="#">Design</a></li>
</ul>
</div>

</div>

</div><!-- /item -->


<div class="col-md-3 col-sm-3 mix design"><!-- item -->

<div class="item-box">
<figure>
<span class="item-hover">
<span class="overlay dark-5"></span>
<span class="inner">

	<!-- lightbox -->
	<a class="ico-rounded lightbox" href="assets/images/demo/mockups/1200x800/12-min.jpg" data-plugin-options='{"type":"image"}'>
		<span class="fa fa-plus size-20"></span>
	</a>

	<!-- details -->
	<a class="ico-rounded" href="portfolio-single-slider.html">
		<span class="glyphicon glyphicon-option-horizontal size-20"></span>
	</a>

</span>
</span>

<img class="img-responsive" src="/static/assets/images/demo/mockups/600x399/12-min.jpg" width="600" height="399" alt="">
</figure>

<div class="item-box-desc">
<h3>Architect Project</h3>
<ul class="list-inline categories nomargin">
<li><a href="#">Architecture</a></li>
<li><a href="#">Design</a></li>
</ul>
</div>

</div>

</div><!-- /item -->


<div class="col-md-3 col-sm-3 mix development"><!-- item -->

<div class="item-box">
<figure>
<span class="item-hover">
<span class="overlay dark-5"></span>
<span class="inner">

	<!-- lightbox -->
	<a class="ico-rounded lightbox" href="/static/assets/images/demo/mockups/1200x800/13-min.jpg" data-plugin-options='{"type":"image"}'>
		<span class="fa fa-plus size-20"></span>
	</a>

	<!-- details -->
	<a class="ico-rounded" href="portfolio-single-slider.html">
		<span class="glyphicon glyphicon-option-horizontal size-20"></span>
	</a>

</span>
</span>

<img class="img-responsive" src="/static/assets/images/demo/mockups/600x399/13-min.jpg" width="600" height="399" alt="">
</figure>

<div class="item-box-desc">
<h3>Speaker Design</h3>
<ul class="list-inline categories nomargin">
<li><a href="#">Audio</a></li>
<li><a href="#">Design</a></li>
</ul>
</div>

</div>

</div><!-- /item -->


<div class="col-md-3 col-sm-3 mix photography"><!-- item -->

<div class="item-box">
<figure>
<span class="item-hover">
<span class="overlay dark-5"></span>
<span class="inner">

	<!-- lightbox -->
	<a class="ico-rounded lightbox" href="/static/assets/images/demo/mockups/1200x800/14-min.jpg" data-plugin-options='{"type":"image"}'>
		<span class="fa fa-plus size-20"></span>
	</a>

	<!-- details -->
	<a class="ico-rounded" href="portfolio-single-slider.html">
		<span class="glyphicon glyphicon-option-horizontal size-20"></span>
	</a>

</span>
</span>

<img class="img-responsive" src="/static/assets/images/demo/mockups/600x399/14-min.jpg" width="600" height="399" alt="">
</figure>

<div class="item-box-desc">
<h3>Mobile Development</h3>
<ul class="list-inline categories nomargin">
<li><a href="#">Development</a></li>
<li><a href="#">Design</a></li>
</ul>
</div>

</div>

</div><!-- /item -->


<div class="col-md-3 col-sm-3 mix design"><!-- item -->

<div class="item-box">
<figure>
<span class="item-hover">
<span class="overlay dark-5"></span>
<span class="inner">

	<!-- lightbox -->
	<a class="ico-rounded lightbox" href="/static/assets/images/demo/mockups/1200x800/15-min.jpg" data-plugin-options='{"type":"image"}'>
		<span class="fa fa-plus size-20"></span>
	</a>

	<!-- details -->
	<a class="ico-rounded" href="portfolio-single-slider.html">
		<span class="glyphicon glyphicon-option-horizontal size-20"></span>
	</a>

</span>
</span>

<img class="img-responsive" src="/static/assets/images/demo/mockups/600x399/15-min.jpg" width="600" height="399" alt="">
</figure>

<div class="item-box-desc">
<h3>Nature Art</h3>
<ul class="list-inline categories nomargin">
<li><a href="#">Nature</a></li>
<li><a href="#">Art</a></li>
</ul>
</div>

</div>

</div><!-- /item -->

</div>

</div>
</section>
<!-- /WORK -->




<!-- -->
<section>
<div class="container">

<div class="row">

<!-- toggle -->
<div class="col-md-4 col-sm-4">
<div class="toggle toggle-accordion toggle-transparent toggle-bordered-full">

<div class="toggle active">
<label>Lorem ipsum dolor.</label>
<div class="toggle-content">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>

<div class="toggle">
<label>Sit amet, consectetur.</label>
<div class="toggle-content">
<p>Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc.</p>
</div>
</div>

<div class="toggle">
<label>Consectetur adipiscing elit.</label>
<div class="toggle-content">
<p>Ut enim massa, sodales tempor convallis et, iaculis ac massa.</p>
</div>
</div>

</div>
</div>
<!-- /toggle -->

<!-- skills -->
<div class="col-md-4 col-sm-4">
<h4>Our Skills</h4>

<label>
<span class="pull-right">60%</span>
MARKETING
</label>
<div class="progress progress-xxs">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%; min-width: 2em;"></div>
</div>

<label>
<span class="pull-right">88%</span>
SALES
</label>
<div class="progress progress-xxs">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 88%; min-width: 2em;"></div>
</div>

<label>
<span class="pull-right">93%</span>
DESIGN
</label>
<div class="progress progress-xxs">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 93%; min-width: 2em;"></div>
</div>

<label>
<span class="pull-right">77%</span>
DEVELOPMENT
</label>
<div class="progress progress-xxs">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 77%; min-width: 2em;"></div>
</div>

<label>
<span class="pull-right">99%</span>
OTHER
</label>
<div class="progress progress-xxs">
<div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 99%; min-width: 2em;"></div>
</div>

</div>
<!-- /skills -->

<!-- recent news -->
<div class="col-md-4 col-sm-4">
<h4>Recent News</h4>

<div class="row tab-post"><!-- post -->
<div class="col-md-2 col-sm-2 col-xs-2">
<a href="blog-sidebar-left.html">
<img src="/static/assets/images/demo/people/300x300/1-min.jpg" width="50" alt="" />
</a>
</div>
<div class="col-md-10 col-sm-10 col-xs-10">
<a href="blog-sidebar-left.html" class="tab-post-link">Maecenas metus nulla</a>
<small>June 29 2014</small>
</div>
</div><!-- /post -->

<div class="row tab-post"><!-- post -->
<div class="col-md-2 col-sm-2 col-xs-2">
<a href="blog-sidebar-left.html">
<img src="/static/assets/images/demo/people/300x300/2-min.jpg" width="50" alt="" />
</a>
</div>
<div class="col-md-10 col-sm-10 col-xs-10">
<a href="blog-sidebar-left.html" class="tab-post-link">Curabitur pellentesque neque eget</a>
<small>June 29 2014</small>
</div>
</div><!-- /post -->

<div class="row tab-post"><!-- post -->
<div class="col-md-2 col-sm-2 col-xs-2">
<a href="blog-sidebar-left.html">
<img src="/static/assets/images/demo/people/300x300/3-min.jpg" width="50" alt="" />
</a>
</div>
<div class="col-md-10 col-sm-10 col-xs-10">
<a href="blog-sidebar-left.html" class="tab-post-link">Nam et lacus neque. Ut enim massa</a>
<small>June 29 2014</small>
</div>
</div><!-- /post -->

</div>
<!-- /recent news -->

</div>

</div>
</section>
<!-- / -->




<!-- PARALLAX -->
<section class="parallax parallax-2" style="background-image: url('/static/assets/images/demo/1200x800/3-min.jpg');">
<div class="overlay dark-8"><!-- dark overlay [1 to 9 opacity] --></div>

<div class="container">

<div class="text-center">
<h3 class="nomargin">Smarty Inside</h3>
<p class="font-lato weight-300 lead nomargin-top">We can't solve problems by using the same kind of thinking we used when we created them.</p>
</div>

<ul class="margin-top-80 social-icons list-unstyled list-inline">
<li>
<a target="_blank" href="#">
<i class="fa fa-facebook"></i>
<h4>Facebook</h4>
<span>Be Our Friend</span>
</a>
</li>
<li>
<a target="_blank" href="#">
<i class="fa fa-twitter"></i>
<h4>Twitter</h4>
<span>Follow Us</span>
</a>
</li>
<li>
<a target="_blank" href="#">
<i class="fa fa-youtube"></i>
<h4>Youtube</h4>
<span>Our Videos</span>
</a>
</li>
<li>
<a target="_blank" href="#">
<i class="fa fa-instagram"></i>
<h4>Instagram</h4>
<span>See Our Images</span>
</a>
</li>
<li>
<a target="_blank" href="#">
<i class="fa fa-linkedin"></i>
<h4>Linkedin</h4>
<span>Check Our Identity</span>
</a>
</li>
<li>
<a target="_blank" href="#">
<i class="fa fa-pinterest"></i>
<h4>Pinterest</h4>
<span>Visual Discovery</span>
</a>
</li>
</ul>

</div>

</section>
<!-- /PARALLAX -->




<!-- TEAM -->
<section>
<div class="container">

<header class="text-center margin-bottom-60">
<h1 class="weight-300">Smarty Team</h1>
<h2 class="weight-300 letter-spacing-1 size-13"><span>WE TRULY CARE ABOUT OUR CUSTOMERS</span></h2>
</header>

<div class="row">

<!-- item -->
<div class="col-md-3 col-sm-6">

<div class="box-flip box-color box-icon box-icon-center box-icon-round box-icon-large text-center">
<div class="front">
<div class="box1 box-default">
<div class="box-icon-title">
	<img class="img-responsive" src="/static/assets/images/demo/people/460x700/7-min.jpg" alt="" />
	<h2>Felica Doe</h2>
	<small>CEO</small>
</div>
</div>
</div>

<div class="back">
<div class="box2 box-default">
<h4 class="nomargin">Felica Doe</h4>
<small>CEO</small>

<hr />

<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere</p>

<hr />

<a href="#" class="social-icon social-icon-sm social-facebook">
	<i class="fa fa-facebook"></i>
	<i class="fa fa-facebook"></i>
</a>
<a href="#" class="social-icon social-icon-sm social-twitter">
	<i class="fa fa-twitter"></i>
	<i class="fa fa-twitter"></i>
</a>
<a href="#" class="social-icon social-icon-sm social-linkedin">
	<i class="fa fa-linkedin"></i>
	<i class="fa fa-linkedin"></i>
</a>
</div>
</div>
</div>

</div>
<!-- /item -->

<!-- item -->
<div class="col-md-3 col-sm-6">

<div class="box-flip box-color box-icon box-icon-center box-icon-round box-icon-large text-center">
<div class="front">
<div class="box1 box-default">
<div class="box-icon-title">
	<img class="img-responsive" src="/static/assets/images/demo/people/460x700/12-min.jpg" alt="" />
	<h2>Joana Doe</h2>
	<small>Art Director</small>
</div>
</div>
</div>

<div class="back">
<div class="box2 box-default">
<h4 class="nomargin">Joana Doe</h4>
<small>Art Director</small>

<hr />

<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere</p>

<hr />

<a href="#" class="social-icon social-icon-sm social-facebook">
	<i class="fa fa-facebook"></i>
	<i class="fa fa-facebook"></i>
</a>
<a href="#" class="social-icon social-icon-sm social-twitter">
	<i class="fa fa-twitter"></i>
	<i class="fa fa-twitter"></i>
</a>
<a href="#" class="social-icon social-icon-sm social-linkedin">
	<i class="fa fa-linkedin"></i>
	<i class="fa fa-linkedin"></i>
</a>
</div>
</div>
</div>

</div>
<!-- /item -->

<!-- item -->
<div class="col-md-3 col-sm-6">

<div class="box-flip box-color box-icon box-icon-center box-icon-round box-icon-large text-center">
<div class="front">
<div class="box1 box-default">
<div class="box-icon-title">
	<img class="img-responsive" src="/static/assets/images/demo/people/460x700/10-min.jpg" alt="" />
	<h2>Melissa Doe</h2>
	<small>Web Developer</small>
</div>
</div>
</div>

<div class="back">
<div class="box2 box-default">
<h4 class="nomargin">Melissa Doe</h4>
<small>Web Developer</small>

<hr />

<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere</p>

<hr />

<a href="#" class="social-icon social-icon-sm social-facebook">
	<i class="fa fa-facebook"></i>
	<i class="fa fa-facebook"></i>
</a>
<a href="#" class="social-icon social-icon-sm social-twitter">
	<i class="fa fa-twitter"></i>
	<i class="fa fa-twitter"></i>
</a>
<a href="#" class="social-icon social-icon-sm social-linkedin">
	<i class="fa fa-linkedin"></i>
	<i class="fa fa-linkedin"></i>
</a>
</div>
</div>
</div>

</div>
<!-- /item -->

<!-- item -->
<div class="col-md-3 col-sm-6">

<div class="box-flip box-color box-icon box-icon-center box-icon-round box-icon-large text-center">
<div class="front">
<div class="box1 box-default">
<div class="box-icon-title">
	<img class="img-responsive" src="/static/assets/images/demo/people/460x700/8-min.jpg" alt="" />
	<h2>Jessica Doe</h2>
	<small>Manager</small>
</div>
</div>
</div>

<div class="back">
<div class="box2 box-default">
<h4 class="nomargin">Jessica Doe</h4>
<small>Manager</small>

<hr />

<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere</p>

<hr />

<a href="#" class="social-icon social-icon-sm social-facebook">
	<i class="fa fa-facebook"></i>
	<i class="fa fa-facebook"></i>
</a>
<a href="#" class="social-icon social-icon-sm social-twitter">
	<i class="fa fa-twitter"></i>
	<i class="fa fa-twitter"></i>
</a>
<a href="#" class="social-icon social-icon-sm social-linkedin">
	<i class="fa fa-linkedin"></i>
	<i class="fa fa-linkedin"></i>
</a>
</div>
</div>
</div>

</div>
<!-- /item -->

</div>


</div>
</section>
<!-- /TEAM -->




<!-- RECENT NEWS -->
<section>
<div class="container">

<header class="text-center margin-bottom-60">
<h1 class="weight-300">Recent News</h1>
<h2 class="weight-300 letter-spacing-1 size-13"><span>WE TRULY CARE ABOUT OUR CUSTOMERS</span></h2>
</header>

<!--
controlls-over		= navigation buttons over the image
buttons-autohide 	= navigation buttons visible on mouse hover only

data-plugin-options:
"singleItem": true
"autoPlay": true (or ms. eg: 4000)
"navigation": true
"pagination": true
"items": "4"

owl-carousel item paddings
.owl-padding-0
.owl-padding-3
.owl-padding-6
.owl-padding-10
.owl-padding-15
.owl-padding-20
-->
<div class="owl-carousel owl-padding-10 buttons-autohide controlls-over" data-plugin-options='{"singleItem": false, "items":"4", "autoPlay": 4000, "navigation": true, "pagination": false}'>
<div class="img-hover">
<a href="blog-single-default.html">
<img class="img-responsive" src="/static/assets/images/demo/451x300/24-min.jpg" alt="">
</a>

<h4 class="text-left margin-top-20"><a href="blog-single-default.html">Lorem Ipsum Dolor</a></h4>
<p class="text-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, asperiores quod est tenetur in.</p>
<ul class="text-left size-12 list-inline list-separator">
<li>
<i class="fa fa-calendar"></i>
29th Jan 2015
</li>
<li>
<a href="blog-single-default.html#comments">
<i class="fa fa-comments"></i>
3
</a>
</li>
</ul>
</div>
<div class="img-hover">
<a href="blog-single-default.html">
<img class="img-responsive" src="/static/assets/images/demo/451x300/17-min.jpg" alt="">
</a>

<h4 class="text-left margin-top-20"><a href="blog-single-default.html">Lorem Ipsum Dolor</a></h4>
<p class="text-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, asperiores quod est tenetur in.</p>
<ul class="text-left size-12 list-inline list-separator">
<li>
<i class="fa fa-calendar"></i>
29th Jan 2015
</li>
<li>
<a href="blog-single-default.html#comments">
<i class="fa fa-comments"></i>
3
</a>
</li>
</ul>
</div>
<div class="img-hover">
<a href="blog-single-default.html">
<img class="img-responsive" src="/static/assets/images/demo/451x300/30-min.jpg" alt="">
</a>

<h4 class="text-left margin-top-20"><a href="blog-single-default.html">Lorem Ipsum Dolor</a></h4>
<p class="text-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, asperiores quod est tenetur in.</p>
<ul class="text-left size-12 list-inline list-separator">
<li>
<i class="fa fa-calendar"></i>
29th Jan 2015
</li>
<li>
<a href="blog-single-default.html#comments">
<i class="fa fa-comments"></i>
3
</a>
</li>
</ul>
</div>
<div class="img-hover">
<a href="blog-single-default.html">
<img class="img-responsive" src="/static/assets/images/demo/451x300/26-min.jpg" alt="">
</a>

<h4 class="text-left margin-top-20"><a href="blog-single-default.html">Lorem Ipsum Dolor</a></h4>
<p class="text-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, asperiores quod est tenetur in.</p>
<ul class="text-left size-12 list-inline list-separator">
<li>
<i class="fa fa-calendar"></i>
29th Jan 2015
</li>
<li>
<a href="blog-single-default.html#comments">
<i class="fa fa-comments"></i>
3
</a>
</li>
</ul>
</div>
<div class="img-hover">
<a href="blog-single-default.html">
<img class="img-responsive" src="/static/assets/images/demo/451x300/18-min.jpg" alt="">
</a>
<h4 class="text-left margin-top-20"><a href="blog-single-default.html">Lorem Ipsum Dolor</a></h4>
<p class="text-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, asperiores quod est tenetur in.</p>
<ul class="text-left size-12 list-inline list-separator">
<li>
<i class="fa fa-calendar"></i>
29th Jan 2015
</li>
<li>
<a href="blog-single-default.html#comments">
<i class="fa fa-comments"></i>
3
</a>
</li>
</ul>
</div>
<div class="img-hover">
<a href="blog-single-default.html">
<img class="img-responsive" src="/static/assets/images/demo/451x300/34-min.jpg" alt="">
</a>
<h4 class="text-left margin-top-20"><a href="blog-single-default.html">Lorem Ipsum Dolor</a></h4>
<p class="text-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, asperiores quod est tenetur in.</p>
<ul class="text-left size-12 list-inline list-separator">
<li>
<i class="fa fa-calendar"></i>
29th Jan 2015
</li>
<li>
<a href="blog-single-default.html#comments">
<i class="fa fa-comments"></i>
3
</a>
</li>
</ul>
</div>
<div class="img-hover">
<a href="blog-single-default.html">
<img class="img-responsive" src="/static/assets/images/demo/451x300/37-min.jpg" alt="">
</a>
<h4 class="text-left margin-top-20"><a href="blog-single-default.html">Lorem Ipsum Dolor</a></h4>
<p class="text-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, asperiores quod est tenetur in.</p>
<ul class="text-left size-12 list-inline list-separator">
<li>
<i class="fa fa-calendar"></i>
29th Jan 2015
</li>
<li>
<a href="blog-single-default.html#comments">
<i class="fa fa-comments"></i>
3
</a>
</li>
</ul>
</div>
<div class="img-hover">
<a href="blog-single-default.html">
<img class="img-responsive" src="/static/assets/images/demo/451x300/23-min.jpg" alt="">
</a>
<h4 class="text-left margin-top-20"><a href="blog-single-default.html">Lorem Ipsum Dolor</a></h4>
<p class="text-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, asperiores quod est tenetur in.</p>
<ul class="text-left size-12 list-inline list-separator">
<li>
<i class="fa fa-calendar"></i>
29th Jan 2015
</li>
<li>
<a href="blog-single-default.html#comments">
<i class="fa fa-comments"></i>
3
</a>
</li>
</ul>
</div>
</div>

</div>
</section>
<!-- /RECENT NEWS -->


<!--
controlls-over		= navigation buttons over the image
buttons-autohide 	= navigation buttons visible on mouse hover only

data-plugin-options:
"singleItem": true
"autoPlay": true (or ms. eg: 4000)
"navigation": true
"pagination": true
-->
<div class="text-center margin-top-30 margin-bottom-30">
<div class="owl-carousel nomargin" data-plugin-options='{"items":6, "singleItem": false, "autoPlay": true}'>
<div>
<img class="img-responsive" src="/static/assets/images/demo/brands/1.jpg" alt="">
</div>
<div>
<img class="img-responsive" src="/static/assets/images/demo/brands/2.jpg" alt="">
</div>
<div>
<img class="img-responsive" src="/static/assets/images/demo/brands/3.jpg" alt="">
</div>
<div>
<img class="img-responsive" src="/static/assets/images/demo/brands/4.jpg" alt="">
</div>
<div>
<img class="img-responsive" src="/static/assets/images/demo/brands/5.jpg" alt="">
</div>
<div>
<img class="img-responsive" src="/static/assets/images/demo/brands/6.jpg" alt="">
</div>
<div>
<img class="img-responsive" src="/static/assets/images/demo/brands/7.jpg" alt="">
</div>
<div>
<img class="img-responsive" src="/static/assets/images/demo/brands/8.jpg" alt="">
</div>
</div>
</div>

{% endblock %}
